
// 实例化
const vm = new Vue({
    el: '.todoapp',
    data: {
        list: [],
        addTodo: '',
        now: -1,
        select: 'all'
    },
    created() {
        this.getTodo()
    },
    methods: {
        // 封装  接收数据的ajax 渲染数据
        getTodo() {
            // 发送 ajax 获取数据
            axios({
                method: 'get',
                url: 'http://localhost:3000/list'
            }).then(res => {
                // console.log(res.data);
                this.list = res.data
            }).catch(() => {
                console.log('请求失败');
            })
        },
        // 添加数据
        addTodos() {
            console.log(this.addTodo);
            if (this.addTodo.trim() == '') return
            // 发送 ajax 添加数据
            axios({
                method: 'post',
                url: 'http://localhost:3000/list',
                data: {
                    name: this.addTodo,
                    flag: false
                }
            }).then(res => {
                // console.log(res.data);
                this.getTodo()
            }).catch(() => {
                console.log('请求失败');
            })
            this.addTodo = ''
        },
        // 删除
        delTodo(id) {
            console.log(id);
            // 发送 ajax 根据 id 删除对应的数据
            axios({
                method: 'delete',
                url: `http://localhost:3000/list/${id}`
            }).then(res => {
                // console.log(res.data)
                this.getTodo()
            }).catch(() => {
                console.log('请求失败')
            })

        },
        // 双击 改变 now 的值
        dblclick(id) {
            this.now = id
        },
        // 修改数据
        amendName(id, e) {
            console.log(id)
            console.log(e.target.value)
            // 当修改数据为空时 删除当前数据
            if (e.target.value.trim() == '') {
                this.delTodo(id)
            }
            // 发送ajax 修改数据
            axios({
                method: 'patch',
                url: `http://localhost:3000/list/${id}`,
                data: {
                    name: e.target.value,
                    flag: false
                }
            }).then(res => {
                // console.log(res);
                this.getTodo()
                this.now = -1
            }).catch(() => {
                console.log('请求失败');
            })
        },
        // 修改状态
        change(id, flag) {
            // 发送 ajax 修改数据
            axios({
                method: 'patch',
                url: `http://localhost:3000/list/${id}`,
                data: {
                    flag
                }
            }).then(res => {
                // console.log(res);
                this.getTodo()
            }).catch(() => {
                console.log('请求失败');
            })


        },
        //删除所有已经完成项 
        addCompleted() {
            console.log(123);
            this.list.filter(v => v.flag).forEach(v => {
                this.delTodo(v.id)
            })
        },
        // 点击all显示全部
        btn(state) {
            console.log(state);
            this.select = state
            // if (this.select == 'all') {
            //     return this.list
            // } else if (this.select == 'active') {
            //     console.log(123);
            //     return this.list.filter(v => !v.flag)
            // } else {
            //     console.log(456);
            //     return this.list.filter(v => v.flag)
            // }
        }


    },
    computed: {
        // 显示所有未完成的的个数
        activeAdd() {
            return this.list.filter(v => !v.flag).length
        },
        btnall() {
            if (this.select == 'all') {
                console.log(000);
                return this.list
            } else if (this.select == 'active') {
                console.log(123);
                return this.list.filter(v => !v.flag)
            } else {
                console.log(456);
                return this.list.filter(v => v.flag)
            }
        },
        // 全部选中与全部不选中
        allshow: {
            get() {
                return this.list.every(v => v.flag)
            },
            set(value) {
                console.log(value);
                this.list.forEach(v => {
                    this.change(v.id, value)
                })
            }
        }

    }
})
